<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <title>jsonp测试例子</title>
    <script type="text/javascript" src="../Backbone/JQ/jquery-1.11.2.js"></script>
    <script type="text/javascript">
        function CallJSONPServer(url){ // 调用JSONP服务器，url为请求服务器地址
            console.log(url);
            var oldScript =document.getElementById(url); // 如果页面中注册了调用的服务器，则重新调用
            if(oldScript){
                oldScript.setAttribute("src",url);
                return;
            }
            var script =document.createElement("script"); // 如果未注册该服务器，则注册并请求之
            script.setAttribute("type", "text/javascript");
            script.setAttribute("src",url);
            script.setAttribute("id", url);
            document.body.appendChild(script);
        }
        function OnJSONPServerResponse(data){
            var $ul = $("<ul></ul>");
            $.each(data,function(i,v){
                $("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul)
            });
            $("#remote").append($ul);
        }
    </script>
</head>
<body>
<a href="http://www.jb51.net/article/32840.htm">jsonp的原理和实例</a>
<input type="button" value="点击获取远程数据" onclick="CallJSONPServer('http://www.sy.com/jsonp.php')" />
<div id="remote"></div>
</body>
</html> 